<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR Code Decoder</title>
    <script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        #dropArea {
            border: 2px dashed #ccc;
            border-radius: 20px;
            width: 100%;
            margin: 20px auto;
            padding: 20px;
            text-align: center;
        }
        #dropArea.highlight {
            border-color: purple;
        }
        #fileElem {
            display: none;
        }
        #result {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>QR Code Decoder</h1>
    <p>Uses <a href="https://github.com/cozmo/jsQR/">jsQR</a> by Cosmo Wolfe</p>
    <p>Upload, drag & drop, or paste a QR code image:</p>
    <div id="dropArea">
        <input type="file" id="fileElem" accept="image/*">
        <label for="fileElem">Select a file or drag & drop here</label>
    </div>
    <div id="result"></div>

    <script>
        // Ensure jsQR is loaded before proceeding
        window.onload = function() {
            if (typeof jsQR === 'undefined') {
                document.getElementById('result').innerHTML = "Error: QR code library not loaded. Please check your internet connection and refresh the page.";
                return;
            }

            const dropArea = document.getElementById('dropArea');
            const fileElem = document.getElementById('fileElem');
            const result = document.getElementById('result');

            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                dropArea.addEventListener(eventName, preventDefaults, false);
            });

            function preventDefaults(e) {
                e.preventDefault();
                e.stopPropagation();
            }

            ['dragenter', 'dragover'].forEach(eventName => {
                dropArea.addEventListener(eventName, highlight, false);
            });

            ['dragleave', 'drop'].forEach(eventName => {
                dropArea.addEventListener(eventName, unhighlight, false);
            });

            function highlight(e) {
                dropArea.classList.add('highlight');
            }

            function unhighlight(e) {
                dropArea.classList.remove('highlight');
            }

            dropArea.addEventListener('drop', handleDrop, false);
            fileElem.addEventListener('change', handleFiles, false);
            document.addEventListener('paste', handlePaste, false);

            function handleDrop(e) {
                const dt = e.dataTransfer;
                const files = dt.files;
                handleFiles(files);
            }

            function handleFiles(files) {
                const file = files instanceof FileList ? files[0] : this.files[0];
                if (file) {
                    decodeQR(file);
                }
            }

            function handlePaste(e) {
                const items = e.clipboardData.items;
                for (let i = 0; i < items.length; i++) {
                    if (items[i].type.indexOf('image') !== -1) {
                        const blob = items[i].getAsFile();
                        decodeQR(blob);
                        break;
                    }
                }
            }

            function decodeQR(file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = new Image();
                    img.onload = function() {
                        const canvas = document.createElement('canvas');
                        const context = canvas.getContext('2d');
                        canvas.width = img.width;
                        canvas.height = img.height;
                        context.drawImage(img, 0, 0, img.width, img.height);
                        const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
                        const code = jsQR(imageData.data, imageData.width, imageData.height);
                        
                        if (code) {
                            let content = code.data;
                            if (isValidUrl(content)) {
                                content = `<a href="${content}" target="_blank">${content}</a>`;
                            }
                            result.innerHTML = `Decoded content: ${content}`;
                        } else {
                            result.innerHTML = "No QR code found in the image.";
                        }
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }

            function isValidUrl(string) {
                try {
                    new URL(string);
                    return true;
                } catch (_) {
                    return false;
                }
            }
        };
    </script>
</body>
</html>
